<script setup>
  import { ref, onMounted } from 'vue';
  import { listApi } from '@/apis/message.js';

  // 1. 任务列表
  const list = ref([])
  const params = {
    page: 1, //第几页
    pageSize: 10, //返回几条数据
  }

  /**
   * 获取列表
   */
  const getList = async () => {
    const { data } = await listApi(201, params.page)
    console.log('任务通知', data);
    // 下一页数据追加到列表
    // list.value = data.items
    list.value.push(...data.items)
    // 每次请求完,判断是否有风多数据
    // 说明 :使用列表  长度和后台数据总数判断
    if (list.value.length === parseInt(data.counts)) {
      // 没有数据了
      hasMore.value = false
    }
  }

  /**
   * 上拉加载更多(分页)
   * 默认只加载第一页
   * 1.使用 scroll--veiw  绑定 @scrolltolower= "回调函数"
   * 2. 在触底回调
   */
  // 定义数据
  const hasMore = ref(true)
  const loadMore = () => {
    // 没有数据,判断
    if (!hasMore.value) {
      return uni.showToast({
        title: "没有更多数据"
      })
    }
    // 还有数据  就 ++
    params.page++
    getList()
    console.log('列表到底了');
  }

  // 2.  发送请求
  onMounted(() => {
    getList()
  })
</script>
<!--  -->
<template>
  <scroll-view @scrolltolower="loadMore" class="scroll-view" refresher-enabled scroll-y>
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text> 全部已读
      </view>
      <uni-card v-for="notify in list" :key="notify.id" :border="false" :is-shadow="false">
        <view class="brief">{{ notify.content }}</view>
        <view class="extra">
          <text class="time">{{ notify.created }}</text>
          <navigator hover-class="none" class="link" :url="`/subpkg_task/detail/index?id=${notify.id}`">查看详情</navigator>
        </view>
        <template v-slot:title>
          <!-- notify.isRead = 0 未读，追加类名unread  ｜ 1 已读 不显示红点  -->
          <view :class="{ unread: !notify.isRead }" class="title">您有新的运输任务</view>
        </template>
      </uni-card>
      <!--  没有消息显示 -->
      <view v-if="list.length === 0" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>